<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM2事件监听器</title>
    <style>
        #d1{
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <input id="addEvent" type="button" value="添加事件">
    <input id="removeEvent" type="button" value="删除事件">
    <div id="d1">

    </div>
    <script>
        let addEvent = document.getElementById("addEvent");
        let removeEvent = document.getElementById("removeEvent");
        let d1 = document.getElementById("d1");
        // DOM2事件监听器：通过addEventListener方法添加事件
        // addEventListener方法由有三个参数：
        // 1.事件类型，比如click；
        // 2.事件处理函数
        // 3.事件流类型，false表示冒泡（默认），true表示捕获。
        // 可以重复添加事件处理方法，只支持现代浏览器。
        // removeEventListener：DOM2删除事件的方法，要求参数必须和创建事件时的一致
        let func = function(){
            console.log("添加事件")
        }
        addEvent.onclick = function(){
            d1.addEventListener("click",func,false);
        }
        removeEvent.onclick = function(){
            d1.removeEventListener("click",func,false);
        }
    </script>
</body>
</html>